<template>
  <div>
    <!-- 父传子 -->
    <!-- 
      语法:
      1.在父组件中给子组件加属性(自定义属性,符合变量命名规则)
      2.在子组件中使用props接收
-->
    <!-- <MyProduce title="超级好吃的口水鸡" price="29" :info="msg"></MyProduce>
    <MyProduce title="超级好吃的脆皮鸭" price="49" info="超级好吃"></MyProduce> -->
    <my-produce
      v-for="item in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="msg"
      :id="item.id"
      @sayPrice="kanjia"
    ></my-produce>
  </div>
</template>

<script>
// import MyProduce from './components/MyProduce.vue';
import MyProduce from "./components/MyProduce.vue";

export default {
  components: { MyProduce },
  data() {
    return {
      msg: "非常好吃",
      list: [
        { id: 1, proname: "第一个", proprice: 18.8 },
        { id: 2, proname: "第二个", proprice: 28.8 },
      ],
    };
  },
  methods: {
    kanjia(num, id) {
      //console.log('父组件收到了数据',num,id)
      //砍价思路
      //1.先根据id找到元素find
      const item = this.list.find((item) => item.id === id);
      //2.修改对象的proprice属性即可
      item.proprice -= num;
    },
  },
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style> 
